<template>
  <view class="card">
    <!-- card头部 -->
    <view class="header-wrap">
      <view class="text-content">{{headerText}}</view>
      <view v-if="hasEdit" class="edit-content" @click.stop="$emit('edit')">
        <i class="iconfont icon-edit" />
        <text class="edit-text">编辑</text>
      </view>
    </view>
    <view class="content-wrap">
      <slot />
    </view>
  </view>
</template>

<script>
export default {
  name: 'card',
  props: {
    headerText: {
      type: String,
      default: ''
    },
    hasEdit: {
      type: Boolean,
      default: true
    }
  }
}
</script>

<style lang="scss" scoped>
.card {
  box-sizing: border-box;
  width: 100%;
  margin-bottom: 24rpx;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 24rpx rgba(150, 151, 153, 0.1);
  background: #FFFFFF;
  .header-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 96rpx;
    padding: 0 32rpx;
    border-bottom: 2rpx solid $n3Color;
    color: $n8Color;
  }
  .text-content {
    flex: 1;
    @include bov(1);
    line-height: 44rpx;
    font-size: 32rpx;
  }
  .edit-content {
    display: flex;
    align-items: center;
    width: 104rpx;
  }
  .edit-text {
    font-size: 28rpx;
    line-height: 40rpx;
    margin-left: 16rpx;
  }
  .content-wrap {
    width: 100%;
    min-height: 160rpx;
    //padding: 24rpx 32rpx;
  }
}
</style>